import React,{
  useState,useEffect
} from 'react'

import { Input ,Button,Select,Space,Table,Tag , Modal,message} from 'antd';

import axios from 'axios'

import Header from './components/Header';//头部组件
import My_modal from './components/My_modal';


function App() {

  let [data,setData] = useState([])
  let [childrenData,setChildrenData] = useState([])

  let [val,setValue] = useState('')
  const [edit_value,setEdit_value] = useState({})


  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: 'state',
      dataIndex: 'state',
      key: 'state',
    },

    {
      title: 'date',
      dataIndex: 'date',
      key: 'date',
    },

    
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button onClick={() => onEdit(record)}>Edit</Button>
          <Button onClick={ () => onDel(record)}>Delete</Button>
        </Space>
      ),
    },
  ];

  useEffect(() => {  //mock数据
    axios.get('/api/list').then(res => {
      setData(res.data.list)
      setChildrenData(res.data.list)
     
    })
  },[])

  let set_state = (e) => {   //select  选中状态
   
      let filter_data = childrenData.filter(item => item.state === e)
     
      setData(filter_data)
    
  }

  let reastDate = () => {  //重置
    axios.get('/api/list').then(res => {
      setData(res.data.list)
      setChildrenData(res.data.list)
     
    })
   
  }

  let change = (e) => {   //绑定input 值
      setValue(e.target.value) 
  }

  let query = () => {  //查询姓名
    console.log(val)
    let filter_data = childrenData.filter(item => item.name.includes(val))
    setData(filter_data)
  }

  let onDel = (record) => {  //删除

    let newData = [...data]
    newData.forEach((item,index) => {
        if(item.id == record.id) {
          newData.splice(index,1)
        }
    })

    setData(newData)
    setChildrenData(newData)
  }  
  


  let onEdit = (record) => {
    setEdit_value(record)
    setIsModalVisible(true);
  }
 
  const head = {
    reastDate,change,query,set_state
  }

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setEdit_value({})
    setIsModalVisible(true);
  };

  const handleOk = (values) => {
    setIsModalVisible(false);

    let newData = [...data]

    if(values.title === '新增') {
      newData.push(values)
      message.success('添加成功')
    }
    else {
      newData.forEach((item,index) => {
        if(item.id === values.id) {
          newData[index] = {...values}
        }
      })
      message.success('编辑成功')
    }

    setData(newData)
    setChildrenData(newData)

  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  let my_modal = {
    isModalVisible,handleOk,handleCancel,data,edit_value
  }


  return (
    <div className='app'> 
      <Header {...head}></Header>
      <main>
      <Button type="primary"  onClick={showModal}>新建</Button>

        <My_modal {...my_modal}></My_modal>
      
        {
          data && <Table pagination={{pageSize:4}} columns={columns} dataSource={data} />

        }
      </main>
   

    </div>
  )
}

export default App